﻿<!DOCTYPE html>

<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>GZ Facepack Auto V1.6</title>
    <link rel="stylesheet" type="text/css" href="src/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="src/style.css">
    <script src="jquery.min.js"></script>
    <script src="dist/jquery.cropit.js"></script>
	<script type="text/javascript" src="src/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="src/data.js"></script>

    <style>
      .cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 3px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 875px;
        height: 875px;
        text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
        font-size:40px;
        line-height:50px;
        text-align:right;
        padding-right:20px;
        zoom:0.4;

      }

      .cropit-preview-image-container {
        cursor: move;


      }

      .cropit-preview-background {
        opacity: .2;
        cursor: auto;


      }

      .image-size-label {
        margin-top: 10px;
      }

      #image-cropper {
	    overflow: hidden;
	}

      input{
        /* Use relative position to prevent from being covered by image background */
        position: relative;
        z-index: 10;
        display: block;

      }

      button {



      }


      @font-face {
	  		  font-family: "koverwatch";
	  		  src: local("koverwatch"), local("koverwatch"), url("font/koverwatch.ttf") format("truetype");
	  		  src: local('koverwatch'), local('koverwatch'),
	  		    url("font/koverwatch.ttf") format("truetype");
	  			}

	  		@font-face {
	  		  font-family: "Bebas Neue";
	  		  src: url("font/BebasNeue.otf");
	  		  src: local('Bebas Neue'), local('Bebas Neue'),
	  		    url("font/BebasNeue.otf") format("opentype");
		}



	body {background-image: linear-gradient(135deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); margin-top:0px; font-size:20px;}
	a {color:#e1c77e;}
aside {postion:absolute; text-align:right; right:0px; top:65px;}


.mainTable {width:70%;margin-left:15%;margin-right:15%;}
.mainTable th {padding: 0 10px;}

.image-editor tr {line-height:35px;}
.image-editor th {width:150px;}



#myDIV
{
position:absolute;

}
.first
{
    border: none;
    border-top: 6px dotted blue;
    width: 100%;
    position:absolute;
    z-index:1000;
    vertical-align:middle;
    top:437.5px;
    background:transparent;
    opacity:0.6;

}

.second
{
    border: none;
    border-left: 6px dotted blue;
    height: 100%;
    position:absolute;
    z-index:1200;
    top:-15px;
    left:437.5px;
    background:transparent;
	opacity:0.6;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


 </style>
</head>
  <body><center>
   <a href="http://fmnation.net" style="padding-top:0px"><img src="filter/logo.png" height=100></a></center>
   <center><b><font size=5>GZ头像自动生成器 V1.6</font></b></center>
	<center>
   <script>
   var b = "";

   var ua = window.navigator.userAgent;
   if(ua.indexOf('MSIE') > 0 || ua.indexOf('Trident') > 0)
    b = "Chrome请您点击我";
   else if(ua.indexOf('Opera') > 0 || ua.indexOf('OPR') > 0)
    b = "Chrome请您点击我";
   else if(ua.indexOf('Firefox') > 0)
    b = "Chrome请您点击我";
   else if(ua.indexOf('Safari') > 0) {
    if(ua.indexOf('Chrome') > 0)
     b = "";
    else
     b = "Chrome请您点击我";
   }
   var result = b.fontsize(7).fontcolor("red");

   document.write(result);
</script>
</center>
<aside>
<span><font color=white>制作 </font><a href="http://mrpotato.tistory.com" style="text-decoration: none;">Mr.Potato</a></span><br>
<span><font color=white>感谢 </font><a href="http://fmgunzo.tistory.com" style="text-decoration: none;">FMGUNZO</a></span><br>
<span><font color=white>汉化 </font><a href="https://lethe1105.tistory.com" style="text-decoration: none;">影舞忘川</a></span>

</aside>

<center><button id="myBtn">球员搜索窗口</button></center>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <table id="example" class="display" width="100%"></table>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<table class="mainTable">
<tr>
<th>
    <div class="image-editor">
<center>
      <input type="file" class="cropit-image-input"><br>

      <div class="cropit-preview">
      <br>1. 点击选择文件<br>2. 调整照片大小<br>3. 姓名/国籍/显示设置<br>4. 照片转换<br>5. 点击存储照片
      <div id="Line">
      <hr class="first"/>
      <hr class="second"/>
      </div>
      </div>
      <div class="image-size-label">
        - 调整照片大小 +
      </div><br>
      <input type="range" class="cropit-image-zoom-input" style="width:200px"><br>


<table style="text-align:left;">
<tr>
	<th>球员名字</th>
	<th><input type="text" id="firstname" value="FMNATION" style="width:200px; font-size:20px; text-align:center;"></th>
</tr>
<tr>
	<th>左上角</th>
	<th>
			<select style="width:200px; font-size:15px;" name="nation" id="nation">
			<option value="images/white.png">空白</option>





			</select></th>
			</tr>
	<tr>
		<th>潜力(左上角)</th>
		<th>
						<select style="width:200px; font-size:15px;" name="poten" id="poten">
						<option value="filter/filter1.png" style="background:skyblue; color:white;">空白</option>


			</select>
			</th></tr>
	<tr>
		<th>照片滤镜</th>
		<th>
									<select style="width:200px; font-size:15px;" name="imgf" id="imgf">
									<option value="filter/filter1.png">---没有滤镜---</option>
									<option value="filter/filter2.png">滤镜1</option>
									<option value="filter/filter3.png">滤镜2</option>
									<option value="filter/filter4.png">滤镜3</option>
									</select>
		</th>
	</tr>
	<tr>
		<th>字体选择</th>
		<th>
									<select style="width:200px; font-size:15px;" name="fontf" id="fontf">
									<option value="gold">Gold 黄金 (基本) </option>
									<option value="silver">Silver 白银</option>
									<option value="TheBlueLagoon">The Blue Lagoon</option>
									<option value="Decent">Decent</option>
									<option value="Starfall">Starfall</option>
									<option value="MetallicToad">Metallic Toad</option>
									</select>
		</th>
	</tr>
	<tr>
			<th>字体长度</th>
			<th>
										<select style="width:200px; font-size:15px;" name="fontw" id="fontw">
										<option value="base">-- 基本 --</option>
										<option value="long">长名 LONG</option>
										<option value="strap">背带风格 STRAP</option>
										</select>
			</th>
	</tr>
	<tr>
		<th>制作者签名</th>
		<th><input type="text" id="madeby" value="gzreboot" style="width:200px; font-size:20px; text-align:center;"></th>
	</tr>
</table>


</th>
<th>
<div style="position: relative; z-index: 10;display: block; float:center;">

<button class="rotate-ccw-btn" style="cursor:pointer;">逆时旋转</button><br>
<button class="rotate-cw-btn" style="cursor:pointer;">顺时旋转</button><br><br>
<button onclick="myFunction()" >基准线 OFF </button><br>
<button onclick="myFunction2()" >基准线 ON </button><br>
</div>

      <script>
	  function myFunction() {
	      document.getElementById("Line").style.display = "none";
	  }
	  function myFunction2() {
	  	      document.getElementById("Line").style.display = "block";
	  }
	</script>
<br>
<button class="export" style="height:7em; font-size:20px;">照片<br>转换</button><br></center><br>

</th>

<th style="vertical-align:super;">
<center><font size=2>'照片转换' <b><font color=white>点击!</font></b> <br> 如果未应用该字体 <br> 在font文件夹里面 <b>安装<font color=white>BebasNeue & Koverwatch & venus rising rg </font></b>字体<br>右键单击下面的图像 <font color=white>'将图像另存为'</font></font></center><br>
<canvas id="canvas" width=350 height=350 style="border:10px ridge #e1c77e;letter-spacing:2.1px;"><br>

</th>
</tr>
</table>
    <script>
      $(function() {
        $('.image-editor').cropit({
       exportZoom: 1,
	             maxZoom : 5,
	             imageBackground: true,
          imageBackgroundBorderWidth: 80,
          type: 'image/jpeg',quality: 0.92,

        });
	$('.rotate-cw-btn').click(function() {
	  $('.image-editor').cropit('rotateCW');
	});
	$('.rotate-ccw-btn').click(function() {
	  $('.image-editor').cropit('rotateCCW');
	});
        $('.export').click(function() {

          var imageData = $('.image-editor').cropit('export');
          var NAME = document.getElementById("firstname").value;
          var NATION = document.getElementById("nation").value;
          var POTEN = document.getElementById("poten").value;
          var FILTER = document.getElementById("imgf").value;
          var FONTFILTER = document.getElementById("fontf").value;
          var FONTWIDTH = document.getElementById("fontw").value;
          var SIGN = document.getElementById("madeby").value;
   			var canvas = document.getElementById("canvas");
   			var can = document.querySelector('canvas');

			if (canvas.getContext){
			  var ctx = canvas.getContext('2d');
			  var img = new Image();
			  img.src= imageData;

			  img.onload = function() {
			  	ctx.clearRect(0, 0, canvas.width, canvas.height);
				roundedImage(1.6, 1.6, 346.5	, 346.5, 60);
    			ctx.clip();
				ctx.scale(1, 1);
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				ctx.restore();
				var filter = new Image();
				filter.src= 'filter/og4.png';
				filter.onload = function() {
																				ctx.drawImage(filter, 0, 0,canvas.width,canvas.height);
																				var imgft=document.createElement("img");
																				imgft.src=FILTER;

																				imgft.onload = function() {
																				ctx.drawImage(imgft,0,0, canvas.width, canvas.height);
																								ctx.textAlign="center";
																								var ft = document.createElement("img");
																								ft.src='filter/fontfilter2.png';
																								ft.onload=function(){



																								var img2 = new Image();
																								img2.src=NATION;
																								img2.onload = function() {
																																	ctx.drawImage(img2,0,0, canvas.width, canvas.height);
																																	var img3 = new Image();
																																img3.src=POTEN;
																																img3.onload = function() {
																																							ctx.drawImage(img3,0,0, canvas.width, canvas.height);
																																							var img4 = new Image();
																																							img4.src='filter/filter1.png';
																																							img4.onload = function(){
																																							drawText();
																																							}

																																							}
																															}
																								}




																								function drawText() {
																														if(FONTWIDTH=='base'){
																																				can.style.letterSpacing = 2.1 + 'px';
																																				if (NAME>='a' && NAME<='z'){
																																								ctx.font="36px 'Bebas Neue'";}
																																								else if (NAME>='A' && NAME<='Z'){
																																								ctx.font="36px 'Bebas Neue'";}
																																								else if (NAME>='가' && NAME<='힣'){
																																								ctx.font="italic 40px 'koverwatch'";}
																																								else {
																																				ctx.font="36px 'Bebas Neue'";}
																																				ctx.save()
																																				ctx.scale(0.83,0.95);
																																			}
																														else if(FONTWIDTH=='long'){
																																					can.style.letterSpacing = 1.05 + 'px';
																																							if (NAME>='a' && NAME<='z'){
																																								ctx.font="30px 'Bebas Neue'";}
																																								else if (NAME>='A' && NAME<='Z'){
																																								ctx.font="30px 'Bebas Neue'";}
																																								else if (NAME>='가' && NAME<='힣'){
																																								ctx.font="italic 40px 'koverwatch'";}
																																								else {
																																				ctx.font="30px 'Bebas Neue'";}
																																				ctx.save()
																																				ctx.scale(0.83,0.95);
																																				}
																														if(FONTWIDTH=='strap'){
																																				can.style.letterSpacing = 1.05 + 'px';
																																				if (NAME>='a' && NAME<='z'){
																																								ctx.font="italic 30px 'Bebas Neue'";}
																																								else if (NAME>='A' && NAME<='Z'){
																																								ctx.font="italic 30px 'Bebas Neue'";}
																																								else if (NAME>='가' && NAME<='힣'){
																																								ctx.font="italic 30px 'koverwatch'";}
																																								else {
																																				ctx.font="30px 'Bebas Neue'";}
																																				ctx.save()
																																				ctx.scale(0.83,0.93);
																																			}


																																if(FONTWIDTH=='strap'){
																																				ctx.shadowColor = "rgba(11,1,2,0.5)";
																																				ctx.shadowOffsetX = -1.5;
																																				ctx.shadowOffsetY = 1.5;
																																				ctx.shadowBlur = 0.1;
																																}
																																else{
																																				ctx.shadowColor = "rgba(11,1,2,0.5)";
																																				ctx.shadowOffsetX = -1.5;
																																				ctx.shadowOffsetY = 1.5;
																																				ctx.shadowBlur = 0.5;
																																	}
																																				ctx.textAlign="center";
																																				if(FONTWIDTH=='strap'){
																																				ctx.textAlign="left";

																																				ctx.translate(0, 0);
																																				ctx.rotate(-85*Math.PI/180);
																																				ctx.textAlign='right';



																																				ctx.fillText(NAME, -73, 57);}
																																				else {
																																				ctx.fillText(NAME, canvas.width*1.21/2, (95*canvas.height/100)*1.047);
																																				}
																																				// Create gradient
																																				var gradient = ctx.createLinearGradient((canvas.width*1.21/2)-(ctx.measureText(NAME).width/2), 0, (canvas.width*1.21/2)+(ctx.measureText(NAME).width/2), 0);
																																				if (FONTFILTER=='gold'){
																																				gradient.addColorStop("0", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.01", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.12", "rgba(213,192,145,1)");
																																				gradient.addColorStop("0.22", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.34", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.44", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.54", "rgba(213,192,145,1)");
																																				gradient.addColorStop("0.65", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.77", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.90", "rgba(228,210,171,1)");
																																				gradient.addColorStop("1", "rgba(196,168,117,1)");}
																																				else if(FONTFILTER=='silver'){
																																				gradient.addColorStop("0", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.01", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.12", "rgba(210,202,202,1)");
																																				gradient.addColorStop("0.22", "rgba(203,197,197,1)");
																																				gradient.addColorStop("0.34", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.44", "rgba(235,225,225,1)");
																																				gradient.addColorStop("0.54", "rgba(210,202,202,1)");
																																				gradient.addColorStop("0.65", "rgba(235,225,225,1)");
																																				gradient.addColorStop("0.77", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.90", "rgba(235,225,225,1)");
																																				gradient.addColorStop("1", "rgba(190,186,186,1)");}
																																				else if(FONTFILTER=='TheBlueLagoon'){
																																				gradient.addColorStop("0", "rgba(67,198,172,1)");
																																				gradient.addColorStop("1", "rgba(25,22,84,1)");}
																																				else if(FONTFILTER=='Decent'){
																																				gradient.addColorStop("0", "rgba(76, 161, 175,1)");
																																				gradient.addColorStop("1", "rgba(196, 224, 229,1)");}
																																				else if(FONTFILTER=='Starfall'){
																																				gradient.addColorStop("0", "rgba(240, 194, 123,1)");
																																				gradient.addColorStop("1", "rgba(75, 18, 72,1)");}
																																				else if(FONTFILTER=='MetallicToad'){
																																				gradient.addColorStop("0", "rgba(171, 186, 171,1)");
																																				gradient.addColorStop("1", "rgba(255, 255, 255,1)");}





																																				// Fill with gradient
																																				ctx.fillStyle = gradient;
																																				ctx.shadowColor = "black";
																																				if(FONTWIDTH=='strap'){
																																				ctx.shadowOffsetX = 0;
																																				ctx.shadowOffsetY = 0;
																																				ctx.shadowBlur = 2;
																																				}
																																				else{
																																				ctx.shadowOffsetX = 0;
																																				ctx.shadowOffsetY = 0;
																																				ctx.shadowBlur = 5;
																																				}
																																				ctx.textAlign="center";
																																				if(FONTWIDTH=='strap'){
																																				ctx.textAlign='right';
																																				ctx.fillText(NAME, -73, 57);}
																																				else {
																																				ctx.fillText(NAME, canvas.width*1.21/2, (95*canvas.height/100)*1.047);
																																				}
																																				ctx.scale(1,1);
																																				ctx.restore();


																														var centerX = canvas.width - 56.3,
																														  centerY = canvas.height - 294,
																														  angle = Math.PI * 0.57,
 																														 radius = 45.8;

																														ctx.save()
																														ctx.scale(1,1);
																														ctx.font="normal 100 8px 'Venus Rising Regular'";
																														var gradient = ctx.createLinearGradient((canvas.width*1.21/2)-(ctx.measureText(NAME).width/2), 0, (canvas.width*1.21/2)+(ctx.measureText(NAME).width/2), 0);
																																				if (FONTFILTER=='gold'){
																																				gradient.addColorStop("0", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.01", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.12", "rgba(213,192,145,1)");
																																				gradient.addColorStop("0.22", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.34", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.44", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.54", "rgba(213,192,145,1)");
																																				gradient.addColorStop("0.65", "rgba(228,210,171,1)");
																																				gradient.addColorStop("0.77", "rgba(223,204,162,1)");
																																				gradient.addColorStop("0.90", "rgba(228,210,171,1)");
																																				gradient.addColorStop("1", "rgba(196,168,117,1)");}
																																				else if(FONTFILTER=='silver'){
																																				gradient.addColorStop("0", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.01", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.12", "rgba(210,202,202,1)");
																																				gradient.addColorStop("0.22", "rgba(203,197,197,1)");
																																				gradient.addColorStop("0.34", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.44", "rgba(235,225,225,1)");
																																				gradient.addColorStop("0.54", "rgba(210,202,202,1)");
																																				gradient.addColorStop("0.65", "rgba(235,225,225,1)");
																																				gradient.addColorStop("0.77", "rgba(179,171,171,1)");
																																				gradient.addColorStop("0.90", "rgba(235,225,225,1)");
																																				gradient.addColorStop("1", "rgba(190,186,186,1)");}
																																				else if(FONTFILTER=='TheBlueLagoon'){
																																				gradient.addColorStop("0", "rgba(67,198,172,1)");
																																				gradient.addColorStop("1", "rgba(25,22,84,1)");}
																																				else if(FONTFILTER=='Decent'){
																																				gradient.addColorStop("0", "rgba(76, 161, 175,1)");
																																				gradient.addColorStop("1", "rgba(196, 224, 229,1)");}
																																				else if(FONTFILTER=='Starfall'){
																																				gradient.addColorStop("0", "rgba(240, 194, 123,1)");
																																				gradient.addColorStop("1", "rgba(75, 18, 72,1)");}
																																				else if(FONTFILTER=='MetallicToad'){
																																				gradient.addColorStop("0", "rgba(171, 186, 171,1)");
																																				gradient.addColorStop("1", "rgba(255, 255, 255,1)");}

																																				// Fill with gradient
																																				ctx.fillStyle = gradient;
																														ctx.shadowColor = "black";
																													ctx.shadowOffsetX = 0;
																													ctx.shadowOffsetY = 0;
																														ctx.shadowBlur = 7;


																														drawTextAlongArc(ctx, SIGN, centerX, centerY, radius, angle);



																														ctx.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);
																														ctx.restore();




																														function drawTextAlongArc(ctx, str, centerX, centerY, radius, angle) {
																														  var len = str.length, s;
																														          ctx.save();
																														          ctx.translate(centerX, centerY);
																														          ctx.rotate(-50 * (angle / len) / 90);
																														          for(var n = 0; n < len; n++) {
																														            ctx.rotate(angle / len);
																														            ctx.save();
																														            ctx.translate(0, -1 * radius);
																														            s = str[n];
																														            ctx.fillText(s, 0, 0);
																														            ctx.restore();
																														          }
																														          ctx.restore();
      }

						}
						}


					}






				}
				}

			function roundedImage(x, y, width, height, radius) {
				ctx.save()
			    ctx.beginPath();
			    ctx.moveTo(x + radius, y);
			    ctx.lineTo(x + width - radius, y);
			    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
			    ctx.lineTo(x + width, y + height - radius);
			    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
			    ctx.lineTo(x + radius, y + height);
			    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
			    ctx.lineTo(x, y + radius);
			    ctx.quadraticCurveTo(x, y, x + radius, y);
			    ctx.closePath();
			}






        });

      });



    </script>
  </body>
</html>
